<!doctype html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<title>svg</title>
<style>

svg.box1 {
    width: 150px;
    height: 150px;
    margin:0px 0px 0px 20px;
  }


svg.box2 {
    width: 150px;
    height: 150px;
  
    -webkit-transition: -webkit-transform 1s, width 1.5s, height 2s;
    transition: width 3s, height 1.8s, transform 2.5s;
}
svg.box2:hover {
    width:250px;
    height:250px;
    -webkit-transform: rotateX(1600deg);
    transform: rotateY(1600deg);
    color:#D86C6C;
}
  .box2 {
  position: relative;
  width: 500px;
  height: 450px;
  margin:70px 0px 0px 20px;
  animation: jump 2s alternate infinite;
  
   &:before,
  &:after {
    position: absolute;
    content: '';
    left: 69px;
    top: 0;
    width: 70px;
    height: 110px;
    background: $strawberry;
    border-radius: 60px 60px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  
  &:after  {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
}
@keyframes jump {
  0% {
    top: -40px;
    transform: rotate(20deg);
  }
  
  100% {
    top: 0;
    transform: rotate(-20deg);
  }
  
}

@keyframes blink {
  0% {
    width: 10px;
    height: 10px;
  }
  
  100% {
    height: 1px;
  }
}
  
}



	body {
  background: antiquewhite;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.first {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}

.box {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: black;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(23, 24, 56, 0.5) 50%, rgba(23, 24, 56, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(23, 24, 56, 0) 0%, rgba(23, 24, 56, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
		
		
		
		.second {
  position: ;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite alternate;
		}
		
		.box3 {
  position: ;
  left: calc(5% - 150px);
  width: 100px;
  height: 100px;
  background: deeppink;
  -webkit-animation: slide 1.5s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite alternate;
}
.box3::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background:linear-gradient( rgba(100, 0, 255, 0) 0%, rgba(255, 0, 255, 0.5) 100%);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-animation: scale 3s cubic-bezier(0.775, 0.05, 0.55, 1.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.775, 0.05, 0.55, 1.95)-1.5s infinite;
}
.box3::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background:linear-gradient( rgba(100, 0, 255, 0) 0%, rgba(100, 0, 255, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite;
          animation: scale 3s cubic-bezier(0.775, 0.05, 0.55, 1.95) infinite;
}







</style>
	</head>
	<body>
			<?xml version="1.0" encoding="UTF-8" standalone="no"?>
		<!-- Created with Inkscape (http://www.inkscape.org/) -->
		
		<svg
			width='150' height='150'
		   xmlns:dc="http://purl.org/dc/elements/1.1/"
		   xmlns:cc="http://creativecommons.org/ns#"
		   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		   xmlns:svg="http://www.w3.org/2000/svg"
		   xmlns="http://www.w3.org/2000/svg"
		   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
		   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
		   width="210mm"
		   height="297mm"
		   viewBox="0 0 210 297"
		   version="1.1"
		   id="svg8"
		   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
		   sodipodi:docname="星.svg">
		  <defs
		     id="defs2" />
		  <sodipodi:namedview
		     id="base"
		     pagecolor="#ffffff"
		     bordercolor="#666666"
		     borderopacity="1.0"
		     inkscape:pageopacity="0.0"
		     inkscape:pageshadow="2"
		     inkscape:zoom="0.35"
		     inkscape:cx="400"
		     inkscape:cy="560"
		     inkscape:document-units="mm"
		     inkscape:current-layer="layer1"
		     showgrid="false"
		     inkscape:window-width="1920"
		     inkscape:window-height="1001"
		     inkscape:window-x="-9"
		     inkscape:window-y="-9"
		     inkscape:window-maximized="1" />
		  <metadata
		     id="metadata5">
		    <rdf:RDF>
		      <cc:Work
		         rdf:about="">
		        <dc:format>image/svg+xml</dc:format>
		        <dc:type
		           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
		        <dc:title></dc:title>
		      </cc:Work>
		    </rdf:RDF>
		  </metadata>
		  <g
		     inkscape:label="Layer 1"
		     inkscape:groupmode="layer"
		     id="layer1">
		    <path
		       sodipodi:type="star"
		       style="fill:yellow;stroke-width:0.26458332"
		       id="path10"
		       sodipodi:sides="5"
		       sodipodi:cx="111.88095"
		       sodipodi:cy="145.05357"
		       sodipodi:r1="78.684441"
		       sodipodi:r2="39.34222"
		       sodipodi:arg1="0.14461444"
		       sodipodi:arg2="0.77293297"
		       inkscape:flatsided="false"
		       inkscape:rounded="0"
		       inkscape:randomized="0"
		       d="M 189.74405,156.39286 140.0447,172.5238 125.15767,222.60981 94.45829,180.32766 42.223318,181.64668 72.949403,139.38393 55.553448,90.113119 105.24259,106.27545 146.72627,74.5054 l -0.0165,52.25162 z"
		       inkscape:transform-center-x="-4.1027307"
		       inkscape:transform-center-y="3.5040311" />
		  </g>
		</svg>	
		
		
		
	<br>	
<h1>原图形</h1>
<svg aria-hidden="true" width='150' height='150' focusable="false" data-prefix="fas" data-icon="glass-martini" class="svg-inline--fa fa-glass-martini fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" >
<path fill="currentColor" d="M502.05 57.6C523.3 36.34 508.25 0 478.2 0H33.8C3.75 0-11.3 36.34 9.95 57.6L224 271.64V464h-56c-22.09 0-40 17.91-40 40 0 4.42 3.58 8 8 8h240c4.42 0 8-3.58 8-8 0-22.09-17.91-40-40-40h-56V271.64L502.05 57.6z">
</path>
</svg>
</br>
<h1>修改后</h1>

<svg
  viewBox='0 0 64 64'
  width='150' height='150'
  fill='pink'stroke="green" stroke-width="0.5">
  <path d='M0 64 L64 64 L36 58 L36 30 L62 10 L63.833333 0 L0 0 L2 10 L28 30 L28 58 L0 64' />
</svg>

<svg aria-hidden="true" width='150' height='150' focusable="false" data-prefix="fas" data-icon="glass-martini-alt" class="svg-inline--fa fa-glass-martini-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="yellow" stroke="green" stroke-width="2" d="M502.05 57.6C523.3 36.34 508.25 0 478.2 0H33.8C3.75 0-11.3 36.34 9.95 57.6L224 271.64V464h-56c-22.09 0-40 17.91-40 40 0 4.42 3.58 8 8 8h240c4.42 0 8-3.58 8-8 0-22.09-17.91-40-40-40h-56V271.64L502.05 57.6zM443.77 48l-48 48H116.24l-48-48h375.53z">
</path>
</svg>

<br>
<h1>原图形</h1>
<svg aria-hidden="true" width='150' height='150' focusable="false" data-prefix="far" data-icon="frown" class="svg-inline--fa fa-frown fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z">
</path>
</svg>

<h1>修改后</h1>
<svg
  viewBox='0 0 64 64'
  width='150' height='150'
  fill='currentcolor'>
  <path fill="yellow" stroke="green" stroke-width="2" d='M2 32 C2 52 12 62 32 62 C52 62 62 52 62 32 C62 12 52 2 32 2 C12 2 2 12 2 32 M42 20 L42 20 C42 12 54 12 54 20 C54 28 42 28 42 20 L42 20 M22 20 L22 20 L22 20 C22 28 10 28 10 20 C10 12 22 12 22 20 M20 40 L46 40 C46 44 42 46 36 46 L30 46 C24 46 20 44 20 40 Z' />
</svg>
</br>

<svg aria-hidden="true" width='150' height='150' focusable="false" data-prefix="fas" data-icon="meh" class="svg-inline--fa fa-meh fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" >
<path fill="pink" stroke="black" stroke-width="3" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm-80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm176 192H152c-21.2 0-21.2-32 0-32h192c21.2 0 21.2 32 0 32zm-16-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z">
</path>
</svg>

  <div>
<div>
<svg class="box1" height="100" width="100"  aria-hidden="true" focusable="false" data-prefix="far" data-icon="user-secret" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="child svg-inline--fa fa-user-secret fa-w-14">
  <path fill="currentColor" d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" class="">
    </path>
  
  </svg>
  </div>

    <div>
<svg class="box2" height="10" width="10"  aria-hidden="true" focusable="false" data-prefix="far" data-icon="user-secret" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="child svg-inline--fa fa-user-secret fa-w-14">
  <path fill="yellow" d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" class="">
    </path>
  
  </svg>
  </div>

</div>


<div class="first">
  <div class="box">
	
		</div>
</div>
	<div class="second">
  <div class="box3"></div>
</div>

</body>
</html>